<script setup lang="ts">
import VEditor from 'vditor'
import "vditor/src/assets/less/index.less"
import {onMounted, ref} from 'vue'
import {blog_category_get_api, blog_one_api, blog_post_api, blog_put_api} from "@api/blog.ts";
import {Blog} from "@/types";
import {useRouter} from "vue-router";
import {UploadFileInfo} from "naive-ui";

const baseURL = import.meta.env.VITE_BASE_API
const upload_action = `${baseURL}upload_image`
const router = useRouter()
const props = defineProps<{
  mode: string,
  blog_id?: number
}>()

const editor_ref = ref(<null | HTMLElement>null)
const show_edit_modal = ref(false)
const v = ref(<null | VEditor>null)
const category_options = ref([])
const blog = ref({
  id: 0,
  title: '',
  title_image: '',
  author: 'tartaglia',
  summary: '',
  content: '',
  category: '',
  create_time: new Date()
} as Blog)

function uploadFinish({file, e}: { file: UploadFileInfo, e: Event }) {
  console.log(file)
  console.log(e)
}


async function loadData() {
  if (props.mode === 'edit' && props.blog_id) {
    let b = await blog_one_api(props.blog_id)
    if (b) {
      blog.value = b
    }
  }
  category_options.value = await blog_category_get_api()

}

async function save() {
  if (props.mode === 'edit') {
    blog.value = await blog_put_api(blog.value)
  } else {
    blog.value = await blog_post_api(blog.value)
  }
  show_edit_modal.value = false
  await router.push({name: 'blog-list'})
}


onMounted(async () => {
  await loadData()
  v.value = new VEditor(editor_ref.value!, {
    cache: {
      id: 'blog-edit-cache-id'
    },
    mode: 'ir',
    height: '100%',
    upload: {
      url: `${baseURL}upload_image`,
      linkToImgUrl: `${baseURL}upload_image_url`
    },
    input(value) {
      blog.value.content = value
    },
    toolbar: [{
      hotkey: '⇧⌘S',
      name: 'sponsor',
      tipPosition: 's',
      tip: '保存',
      className: 'right',
      icon: '<svg t="1704712625413" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2914" width="200" height="200"><path d="M426.666667 128h-149.333334v234.453333c0 12.074667 9.450667 21.546667 21.205334 21.546667h298.922666c11.626667 0 21.205333-9.6 21.205334-21.546667V128h-64v149.504c0 23.466667-19.157333 42.496-42.624 42.496h-42.752A42.666667 42.666667 0 0 1 426.666667 277.504V128zM192 896V661.546667C192 602.474667 239.786667 554.666667 298.837333 554.666667h426.325334A106.709333 106.709333 0 0 1 832 661.546667V896h42.517333A21.312 21.312 0 0 0 896 874.752V273.664L750.336 128H704v234.453333c0 58.965333-47.701333 106.88-106.538667 106.88H298.538667A106.56 106.56 0 0 1 192 362.453333V128H149.248A21.269333 21.269333 0 0 0 128 149.482667v725.034666C128 886.421333 137.578667 896 149.482667 896H192zM42.666667 149.482667A106.602667 106.602667 0 0 1 149.248 42.666667H768a42.666667 42.666667 0 0 1 30.165333 12.501333l170.666667 170.666667A42.666667 42.666667 0 0 1 981.333333 256v618.752A106.645333 106.645333 0 0 1 874.517333 981.333333H149.482667A106.752 106.752 0 0 1 42.666667 874.517333V149.482667z m704 512.042666c0-12.010667-9.536-21.525333-21.504-21.525333H298.837333C286.933333 640 277.333333 649.6 277.333333 661.546667V896h469.333334V661.546667z" p-id="2915"></path></svg>',
      click() {
        show_edit_modal.value = true
      }
    }, 'edit-mode', '|', 'headings', 'bold', 'code', '|', 'upload'
    ],
    after: () => {
      v.value!.setValue(blog.value.content || '')
    }
  })
})
</script>

<template>
  <div>
    <n-modal v-model:show="show_edit_modal">
      <div class="edit-form">
        <n-form>
          <n-form-item label="标题">
            <n-input v-model:value="blog.title" placeholder="请输入"/>
          </n-form-item>
          <n-form-item label="标题图片">
            <n-flex :wrap="false">
              <n-input v-model:value="blog.title_image" placeholder="标题图片路径"/>
              <n-upload :show-file-list="false" :multiple="false" :action="upload_action">
                <n-button type="primary">上传</n-button>
              </n-upload>
            </n-flex>
          </n-form-item>
          <n-form-item label="作者">
            <n-input v-model:value="blog.author"/>
          </n-form-item>
          <n-form-item label="摘要">
            <n-input type="textarea" v-model:value="blog.summary" placeholder="摘要"/>
          </n-form-item>
          <n-form-item label="分类">
            <n-tree-select v-model:value="blog.category" :options="category_options" label-field="name"
                           key-field="name" placeholder="请选择分类"></n-tree-select>
          </n-form-item>
          <div>
            <n-flex>
              <n-button type="primary" @click="save"> 提交</n-button>
              <n-button type="warning" @click="show_edit_modal = false"> 取消</n-button>
            </n-flex>
          </div>
        </n-form>
      </div>
    </n-modal>
    <div ref="editor_ref" class="editor-box"></div>
  </div>
</template>

<style scoped lang="scss">
.edit-form {
  background: #fff;
  padding: 30px;
  min-width: 600px;
}

.editor-box {

}

</style>